<style>
  /* 下拉上拉加载插件样式 */
  .refreshWrap .refresh {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .refreshWrap .loadingBox {
    width: 100%;
    height: 40px;
    text-align: center;
    padding: 10px;
    position: relative;
    background-color: #fff;
    z-index: 2;
  }
  .refreshWrap .loading,
  .refreshWrap .loadTxt {
    vertical-align: middle;
    display: inline-block;
  }
  .refreshWrap .loading {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    border: 1px solid #666;
    border-top-color: transparent;
    margin-right: 8px;
    transform: translateZ(0);
    position: relative;
  }
  .refreshWrap .noMore .loading {
    display: none;
  }
  .refreshWrap .success {
    border-color: transparent;
  }
  .refreshWrap .success:before {
    content: "";
    border: 1px solid #666;
    border-top-color: transparent;
    border-left-color: transparent;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 8px;
    height: 16px;
  }
  .refreshWrap .rotate {
    -webkit-animation: refresh-rotate 0.6s linear infinite;
    animation: refresh-rotate 0.6s linear infinite;
  }
  @keyframes refresh-rotate {
    0% {
      transform: rotateZ(0deg);
      -moz-transform: rotate(0deg);
    }
    100% {
      transform: rotateZ(360deg);
      -moz-transform: rotate(360deg);
    }
  }
</style>
<div class="CenterHeaderBox RollingGoal">
  <div class="CenterBackBtn">
    <a href="javascript:history.go(-1)">
      <img src="__CDN__/map/images/return.png" alt="返回"
    /></a>
  </div>
  <div class="CenterHeaderTitle">我的贡献值</div>
</div>

<div class="CenterMain">
  <div class="ParticipationTop gradualBg">
    <p class="p1">{$user.score}</p>
    <p class="p2">贡献值</p>
  </div>
  <div class="BalanceList">
    <div class="title">贡献值明细</div>
    <div
      class="BalanceDetail"
      style="position: absolute;width:100%;height: 140%;overflow-y:auto;-webkit-overflow-scrolling: touch;padding-bottom: .98rem;box-sizing: border-box;"
    >
      <ul id="ul"></ul>
    </div>
  </div>
</div>
<style>
  .BalanceList .textL .p1 span:nth-child(2){color: #555555;font-size: 0.24rem !important;}
</style>
<script type="text/javascript" src="__CDN__/assets/js/zepto.min.js"></script>
<script
  type="text/javascript"
  src="__CDN__/assets/js/PullToRefresh.min.js"
></script>

<script>
  var n = 0,
    flag = true;

  var refreshBox = new PullToRefresh({
    container: ".BalanceDetail",
    pull: {
      callback: function() {
        setTimeout(function() {
          n = 0;
          re_ajax(n);
          refreshBox.endPullRefresh(true);
        }, 1000);
      }
    },
    up: {
      callback: function() {
        setTimeout(function() {
          n++;
          re_ajax(n);
          refreshBox.endUpLoading(flag);
        }, 1000);
      }
    }
  });
  function re_ajax(page) {
    $.ajax({
      type: "GET",
      url: "{$http_url}/index/user/contribution",
      dataType: "json",
      data: {
        page: page
      },
      success: function(data) {
        if (page == 1 || page == 0) {
          $("#ul").html("");
        }
        var html = "";
        data.data.forEach(function(v) {
            var name='';
            if(v.playUser_id>0){
                name='  来源会员ID:'+v.playUser_id;
            }else{
                name='会员id'+v.user_id;
            }

          html += '<li class="am-cf">';
          html += '<div class="textL am-fl">';
          html += ' <p class="p1"><span style="font-weight:bold;">'+v.memo+'</span><span style="font-size: 0.3rem;">'+name +'</span></p>';
          html += '  <p class="p2">' + v.createtime + "</p>";
          html += "</div>";
          html += '<div class="textR dmColor am-fr">+' + v.money + "</div>";
          html += "</li>";
        });
        // $("#ul")[type](html)
        $("#ul").append(html);
        if (html == "") {
          flag = false;
        }
      },
      error: function(jqXHR) {
        console.log("Error: " + jqXHR.status);
      }
    });
  }
</script>
